<html>
<head>
<style>
	body{
		position: fixed;
		width: 80%; 
		height: 100%;
		top: 0px;
	}
	.east{
		position: fixed;
		left: 1031px;
		top: 7px;
	}
	.sample1{
		position: fixed;
		left: 1035px;
		top: 450px;
		background-color:pink;
		width: 20%;
		height: 10%;
	}
	.sample2{
		position: fixed;
		left: 1035px;
		top: 500px;
		background-color:yellow;
		width: 20%;
		height: 19%;
	}
</style>
<link type="text/css" href="jquery-ui/css/hot-sneaks/jquery-ui-1.8.13.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="jquery-ui/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript' src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script type='text/javascript'>

		var map, controls, markers;
		var key = "single";
		var size = new OpenLayers.Size(26,53);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon = new OpenLayers.Icon('red.png',size,offset);
		var markers = new OpenLayers.Layer.Markers("Markers");
		var markerUrl = "";
		
		OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {               
	                defaultHandlerOptions: {
	                    'single': true,
	                    'double': false,
	                    'pixelTolerance': 0,
	                    'stopSingle': false,
	                    'stopDouble': false
	                },

	                initialize: function(options) {
	                    this.handlerOptions = OpenLayers.Util.extend(
	                        {}, this.defaultHandlerOptions
	                    );
	                    OpenLayers.Control.prototype.initialize.apply(
	                        this, arguments
	                    ); 
	                    this.handler = new OpenLayers.Handler.Click(
	                        this, {
	                            'click': this.onClick
	                        }, this.handlerOptions
	                    );
	                }, 
	
	                onClick: function(e) {	  
						var output1 = document.getElementById(key + "Output1");
						var output2 = document.getElementById(key + "Output2");	
                    
						var xy = map.getLonLatFromViewPortPx(e.xy);
								
						var lonlat = xy.transform(map.projection, map.displayProjection);
								
						var Longitude = lonlat.lon;
						var Latitude = lonlat.lat;
						
						markers.addMarker(new OpenLayers.Marker(lonlat, icon));
						
						output1.value = "";
						output2.value = "";
		
						output1.value = output1.value + Longitude;
						output2.value = output2.value + Latitude;
	                }
	
	            });

	
	function init()
	{
		map = new OpenLayers.Map("mapdiv", {
			controls:[
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.Attribution(),
				new OpenLayers.Control.Permalink(),
				new OpenLayers.Control.ScaleLine(),
				new OpenLayers.Control.OverviewMap(),
				new OpenLayers.Control.MousePosition()],
				numZoomLevels: 14,
				units: 'mi',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
		});
		
		map.addLayer(new OpenLayers.Layer.OSM());
		
		//Set start centrepoint and zoom    
		var lonLat = new OpenLayers.LonLat(121.047, 14.390).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
		var zoom=14;
		map.setCenter (lonLat, zoom);  
		
		map.addLayer(markers);
		
		var coordAddy = "_";
			if(coordAddy.length > 2)
			{
				<!-- Marker Array Generated by php -->

				markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(_).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),icon.clone())); 

 				
				map.zoomToExtent(markers.getDataExtent());
				markerUrl = coordAddy;
                document.getElementById('markerLink').innerHTML = "<a href=file:///C:/Users/babygirl/Documents/OpenLayers/clickMap.html?coords=" + markerUrl + ">Link to map with current markers</a>";
            }
		
		var click = new OpenLayers.Control.Click();
	    map.addControl(click);
		click.activate();
		
		var output1 = document.getElementById(key + "Output1");
        output1.value = "";
		var output2 = document.getElementById(key + "Output2"); 
        output2.value = "";
			
	}
	
	$(function ()
		{
			$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
			var name = $( "#name" ),
			address = $( "#address" ),
			password = $( "#password" ),
			allFields = $( [] ).add( name ).add( address ).add( password ),
			tips = $( ".validateTips" );

			function updateTips( t ) {
				tips
					.text( t )
					.addClass( "ui-state-highlight" );
				setTimeout(function() {
					tips.removeClass( "ui-state-highlight", 1500 );
				}, 500 );
			}

			function checkLength( o, n, min, max ) {
				if ( o.val().length > max || o.val().length < min ) {
					o.addClass( "ui-state-error" );
					updateTips( "Length of " + n + " must be between " +
						min + " and " + max + "." );
					return false;
				} else {
					return true;
				}
			}

			function checkRegexp( o, regexp, n ) {
				if ( !( regexp.test( o.val() ) ) ) {
					o.addClass( "ui-state-error" );
					updateTips( n );
					return false;
				} else {
					return true;
				}
			}
			
			$( "#dialog-form1" ).dialog({
				autoOpen: false,
				height: 300,
				width: 380,
				modal: true,
				buttons: {
					"Submit": function() {
						var bValid = true;
						allFields.removeClass( "ui-state-error" );

						bValid = bValid && checkLength( username, "username", 3, 16 );
						bValid = bValid && checkLength( password, "password", 6, 80 );

						bValid = bValid && checkRegexp( username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
						// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
						bValid = bValid && checkRegexp( password, /^[a-z]([0-9a-z_])+$/i, "Address may consist of a-z, 0-9, underscores, begin with a letter." );
						

						if ( bValid ) {
							$( "#users tbody" ).append( "<tr>" +
								"<td>" + username.val() + "</td>" + 
								"<td>" + password.val() + "</td>" + 
							"</tr>" ); 
						
							 var username     = $('#username').attr('value');  
								var password     = $('#password').attr('value');  
									$.ajax({  
										type: "POST",  
										url: "ajax.php",  
										data: "username="+ username +"& password="+ password,  
										success: function(){  
											$('form#submit').hide(function(){$('div.success').fadeIn();});  
							  
										}  
									});  
							
							$( this ).dialog( "close" );
						}	 
						
					},
					Cancel: function() {
						$( this ).dialog( "close" );
					}
				},
				close: function() {
					allFields.val( "" ).removeClass( "ui-state-error" );
				}
			});
			
			$( "#dialog-form2" ).dialog({
				autoOpen: false,
				height: 300,
				width: 380,
				modal: true,
				buttons: {
					"Submit": function() {
						var bValid = true;
						allFields.removeClass( "ui-state-error" );

						bValid = bValid && checkLength( name, "username", 3, 16 );
						bValid = bValid && checkLength( address, "address", 6, 80 );
						bValid = bValid && checkLength( cnumber, "cnumber", 5, 16 );

						bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
						// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
						bValid = bValid && checkRegexp( address, /^[a-z]([0-9a-z_])+$/i, "Address may consist of a-z, 0-9, underscores, begin with a letter." );
						bValid = bValid && checkRegexp( cnumber, /^\([1-9]\d{2}\)\s?\d{3}\-\d{4}$/, "Contact Number field only allow : a-z 0-9" );

						if ( bValid ) {
							$( "#users tbody" ).append( "<tr>" +
								"<td>" + name.val() + "</td>" + 
								"<td>" + address.val() + "</td>" + 
								"<td>" + cnumber.val() + "</td>" +
							"</tr>" ); 
							
							$( this ).dialog( "close" );
						}
						
						$('.result').load('testSuccess1.php');
						
						$('.log').ajaxSend(function() {
							$(this).text('Triggered ajaxSend handler.');
						});	
					},
					Cancel: function() {
						$( this ).dialog( "close" );
					}
				},
				close: function() {
					allFields.val( "" ).removeClass( "ui-state-error" );
				}
			});

			$("#registered-user")
				.button()
				.click(function() {
					$("#dialog-form1").dialog("open");
				});
			
			$( "#unregistered-user" )
				.button()
				.click(function() {
					$( "#dialog-form2" ).dialog( "open" );
				});
			
		});
	
</script>
</head>
<body onload="init()">
<div id="mapdiv"></div>
	<div id="dialog-form1" title="Registered User">
	<p class="validateTips">All form fields are required.</p>
	<form>
	<fieldset>
		<label for="username">Username</label>
		<input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all" />
		<br />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
	</div>

	<div id="dialog-form2" title="Unregistered User">
	<p class="validateTips">All form fields are required.</p>
	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<br />
		<label for="address">Address</label>
		<input type="text" name="address" id="address" value="" class="text ui-widget-content ui-corner-all" />
		<br />
		<label for="cnumber">Contact Number</label>
		<input type="cnumber" name="cnumber" id="cnumber" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
	</div>
	
	

	<div id="east" title="Add POI" class="east">
	<fieldset>
	<table>
	<tr>
		<td>
		<label for="longitude">Longitude: </label>
		<input type="text" name="longitude" id="singleOutput1" class="text ui-widget-content ui-corner-all" /></td>
	</tr>
	<tr>
		<td><label for="latitude">Latitude: </label>
		<input type="text" name="latitude" id="singleOutput2" class="text ui-widget-content ui-corner-all" /></td>
	</tr>
	<tr>
		<td><label for="poi">Points of Interest: </label>
		<select name="poi" id="poiTypes">
			<option value="equipment">Equipment</option>
			<option value="resources">Resources</option>
			<option value="supplies">Supplies</option>
			<option value="humanresource">Human Resource</option>
		</select></td>
	</tr>
	<tr>
		<td><label for="desc">Description: </label>
		<textarea rows="3" cols="15">Please write description here..</textarea>
		</td>
	</tr>
	<tr>
		<td><input type="button" id="registered-user" value="Save as Registered User"></td>	
	</tr>
	<tr>
		<td><input type="button" id="unregistered-user" value="Save as Unregistered User"></td>
	</tr>
	</table>	
	</fieldset>
	</div>
	
	<div id="log" class="sample1">
	</div>
	
	<div id="result" class="sample2">
	</div>
</body>
</html>	